import React, { useState, useEffect } from 'react'
import {
  Button, Form, Input, Modal, Table, Select,
  message
} from 'antd';
// import axios from 'axios';
import axios  from '../../../utils/axios';
import './index.css'
import Service from '../../../service/index'

const AddIncome = () => {
  //搜索
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Finish:', values);
  };
  //弹出框隐藏关闭
  //点击客户名字弹出需要用的
  const [name, setName] = useState('')
  const [sales, setSales] = useState('')
  //----------------------
  const [editForm] = Form.useForm();
  const [isEditModalVisible, setEditIsModalVisible] = useState(false);
  //---1.点击【客户名字】的新增框
  //新增完成
  const onEditFinish = () => {
    let Financial = editForm.getFieldsValue()
    let add = {
      customer_name: name,
      salesman: sales,
      income_expenditure: 0,
      autid:1
    }
    let result = Object.assign(Financial, add);
    console.log(result)
    Service.financeService.finance.addIn(result).then(data=>{
      console.log(data);
      message.success('收入记录，新增成功！')
    })
    // axios({
    //   url: '/finance/addEarnings',
    //   method: 'post',
    //   data: result,
    //   contentType: "application/json",
    // }).then(data => {
    //   console.log(data);
    //   message.success('收入记录，新增成功！')
    // })
    setEditIsModalVisible(false)
  }
  //新增取消
  const handleEditCancel = () => {
    setEditIsModalVisible(false)
  }
  //弹出
  const showModal = (name, sales) => {
    setEditIsModalVisible(true);
    console.log(name, sales);
    setName(name)
    setSales(sales)
    console.log(sales);
  };
  //------------------------
  //----2.无关联弹出需要用的----
  const [from] = Form.useForm();
  const [isModalVisible, setIsModalVisible] = useState(false);
  //新增完成
  const onOk = () => {
    let Financial = from.getFieldsValue()
    let add = {
      customer_name: '无关联客户',
      salesman: '超级管理员',
      income_expenditure: 0,
      autid:1
    }
    let result = Object.assign(Financial, add);
    console.log(result)
    Service.financeService.finance.addIn(result).then(data=>{
      console.log(data);
      message.success('收入记录，新增成功！')
    })
    // axios({
    //   url: '/finance/addEarnings',
    //   method: 'post',
    //   data: result,
    //   contentType: "application/json",
    // }).then(data => {
    //   console.log(data);
    //   message.success('收入记录，新增成功！')
    // })
    setIsModalVisible(false)
  }
  //新增取消
  const handleCancel = () => {
    setIsModalVisible(false)
  }
  //-------上面是无关联-------------
  //-------3.新增客户弹出需要用的-------
  const [cusForm] = Form.useForm();
  const [isCusModalVisible, setCusIsModalVisible] = useState(false);
  //新增完成
  const onCusOk = () => {
    let Financial = cusForm.getFieldsValue()
    let add = {
      entryTime:time,
      salesman:'超级管理员'
    }
    let result = Object.assign(Financial, add);
    console.log(result)
    message.success('客户，新增成功！')
    // axios({
    //   url: '/finance/addExpend',
    //   method: 'post',
    //   data: result,
    //   contentType: "application/json",
    // }).then(data => {
    //   console.log(data);
    //   message.success('客户，新增成功！')
    // })
    setCusIsModalVisible(false)
  }
  //新增取消
  const handleCusCancel = () => {
    setCusIsModalVisible(false)
  }
  //-------上面是新增客户弹出---------

  //弹出框里的表单
  const { TextArea } = Input;

  //设置数据
  const [data, setData] = useState([])
  //获取页面data
  const getData = () => {
    console.log('进来了')
    axios({
      url: '/finance/queryEarning?currentPage=1&pageSize=10&income_expenditure=0',
      contentType: "application/json",
    }).then(data => {
      let newData = data.data.data
      console.log(newData);  
      setData(newData)
    })
  }

  //挂载后发起请求
  useEffect(() => {
    getData()
  }, [])
  //表头设置
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'customer_name',
      key: 'customer_name',
      render: (_, record) => (<span onClick={() => { showModal(record.customer_name, record.salesman) }} style={{ color: 'blue' }} >{record.customer_name}</span>),
    },
    {
      title: '客户类型',
      dataIndex: 'lx',
      key: 'lx',
      render:() =>(<span>高意向</span>)
    },
    
    {
      title: '联系人',
      dataIndex: 'contact_name',
      key: 'contact_name',
    },
    {
      title: '手机号码',
      key: 'sjhm',
      dataIndex: 'sjhm',
      render:() =>(<span>898989898</span>)
    },
    {
      title: 'QQ',
      key: 'qq',
      dataIndex: 'qq',
      render:() =>(<span>8888888</span>)

    },
    {
      title: '录入时间',
      dataIndex: 'entryTime',
      render:() =>(<span>2022-08-18</span>)
    },
    {
      title: '业务员',
      dataIndex: 'salesman',
      key: 'salesman',
      render:() =>(<span>超级管理员</span>)
    },
  ];
  //获取当天的时间
  let date = new Date()
  let year = date.getFullYear().toString();
  let month = (date.getMonth() + 1).toString();
  let day = date.getDate().toString();
  let time = year + '-' + month + '-' + day;
  return (
    <div id='addIncome'>
      <Form form={form} name="search" layout="inline" onFinish={onFinish}>
        <Form.Item
          name="ss"
        >
          <Input placeholder="客户名称、联系人、手机号" style={{ width: '190px' }} />
        </Form.Item>
        <Form.Item >
          <Button
            type="primary"
            htmlType="submit"
          >
            立即搜索
          </Button>
        </Form.Item>
        <Form.Item >
          <Button
            htmlType="button"
            style={{ background: '#149E83', color: 'white' }}
            onClick={() => {
              setCusIsModalVisible(true)
            }}
          >
            新增客户
          </Button>
        </Form.Item>
        <Form.Item >
          <Button
            htmlType="button"
            style={{ background: '#1E82BB', color: 'white' }}
            onClick={() => {
              setIsModalVisible(true)
            }}
          >
            无关联客户支出录入
          </Button>
        </Form.Item>

      </Form>
      <Table id='c' columns={columns} dataSource={data} rowKey={record => record.financial_id} />
      <Modal title="新增支出记录" visible={isEditModalVisible} onOk={onEditFinish} onCancel={handleEditCancel} okText='保存' cancelText='关闭'>
        {/* 弹出框里的form */}
        <Form
          form={editForm}
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          layout="horizontal"
        >
          <Form.Item label="客户名称" >
            <Input value={name} disabled={true} />
          </Form.Item>
          <Form.Item label="收支日期" required>
            <Input value={time} disabled={true}/>
          </Form.Item>
          <Form.Item label="收支类别" name='income_category' required>
            <Select placeholder='请选择'>
              <Select.Option value="订单预付款">订单预付款</Select.Option>
              <Select.Option value="合同款">合同款</Select.Option>
              <Select.Option value="维护费">维护费</Select.Option>
              <Select.Option value="产品续费">产品续费</Select.Option>
              <Select.Option value="其他">其他</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="收支金额" name='has_been_receiving' required>
            <Input />
          </Form.Item>
          <Form.Item label="资金账户" name='capital'>
            <Select placeholder='请选择'>
              <Select.Option value="默认账户">默认账户</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="经办人" name='agent' required>
            <Select placeholder='请选择'>
              <Select.Option value="超级管理员">超级管理员</Select.Option>
              <Select.Option value="张三">张三</Select.Option>
              <Select.Option value="李四">李四</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="备注" name='note'>
            <TextArea rows={4} />
          </Form.Item>
          <Form.Item label="业务员" >
            <Input value={sales} disabled={true}/>
          </Form.Item>
        </Form>
      </Modal>
      <Modal title="新增支出记录" visible={isModalVisible} onOk={onOk} onCancel={handleCancel} okText='保存' cancelText='关闭'>
        {/* 弹出框里的form */}
        <Form
          form={from}
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          layout="horizontal"
        >
          <Form.Item label="客户名称" >
            <Input value='无关联客户' disabled={true}/>
          </Form.Item>
          <Form.Item label="收支日期" required >
            <Input value={time} disabled={true}/>
          </Form.Item>
          <Form.Item label="收支类别" name='income_category' required>
            <Select placeholder='请选择'>
              <Select.Option value="订单预付款">订单预付款</Select.Option>
              <Select.Option value="合同款">合同款</Select.Option>
              <Select.Option value="维护费">维护费</Select.Option>
              <Select.Option value="产品续费">产品续费</Select.Option>
              <Select.Option value="其他">其他</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="收支金额" name='has_been_receiving' required>
            <Input />
          </Form.Item>
          <Form.Item label="资金账户" name='capital'>
            <Select placeholder='请选择'>
              <Select.Option value="默认账户">默认账户</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="经办人" name='agent' required>
            <Select placeholder='请选择'>
              <Select.Option value="超级管理员">超级管理员</Select.Option>
              <Select.Option value="张三">张三</Select.Option>
              <Select.Option value="李四">李四</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="备注" name='note'>
            <TextArea rows={4} />
          </Form.Item>
          <Form.Item label="业务员" >
            <Input value='超级管理员' disabled={true}/>
          </Form.Item>
        </Form>
      </Modal>
      <Modal title="新增客户" visible={isCusModalVisible} onOk={onCusOk} onCancel={handleCusCancel} okText='保存' cancelText='关闭'>
        {/* 弹出框里的form */}
        <Form
          form={cusForm}
          labelCol={{
            span: 4,
          }}
          wrapperCol={{
            span: 14,
          }}
          layout="horizontal"
        >
          <Form.Item label="客户名称" name="customer_name" required >
            <Input  />
          </Form.Item>
          <Form.Item label="联系人" name='contact_name' >
            <Input  />
          </Form.Item>
          <Form.Item label="手机号码" name='phone' required>
            <Input/>
          </Form.Item>
          <Form.Item label="QQ" name='qq'>
            <Input />
          </Form.Item>
          <Form.Item label="客户类型" name='type'>
            <Select placeholder='请选择'>
              <Select.Option value="已成交">已成交</Select.Option>
              <Select.Option value="等待打款">等待打款</Select.Option>
              <Select.Option value="确定细节">确定细节</Select.Option>
              <Select.Option value="有意向">有意向</Select.Option>
              <Select.Option value="潜在客户">潜在客户</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="备注" name='note'>
            <TextArea rows={4} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default AddIncome